<template>
	<div class="content">
		<div class="head_box">
			<img class="bj" src="/static/lt_bj.png" alt="">
			<div class="head" :style="{height:navBarHeight+'px'}">
				<p :style="{height:statusBarHeight+'px'}"></p>
			</div>
			<div class="box">
				<div  @click="changeCityPop">
					<p>{{groupName?groupName:'全国'}}-接单总群</p>
					<u-icon name="arrow-down-fill" color="#4E5969" size="16"></u-icon>
				</div>
				<img @click="toGroup" src="/static/user.png" alt="">
			</div>
		</div>

		<!--  -->

		<scroll-view 
			id="scroll-view"
			class="list_box" 
			:scroll-into-view="intoView"
			@scroll="onScroll"
			@scrolltoupper="handleScrollToUpper"
			scroll-y 
			:style="{ minHeight: `calc(100vh - ${105 + scrollViewHeight}px)` }"
		>
			<div class="loading_more" v-if="loadingShow">
				<u-loading-icon mode="circle" text="加载中..." timing-function="linear"></u-loading-icon>
			</div>

			<div :id="'item'+index" class="list" v-for="(item,index) in list">
				<!-- <div class="time">8月12日 上午12:00</div>
				<div class="yq"><span>减减减</span>邀请<span>信贷部（张经理）</span>加入群聊</div> -->
				<div class="left" v-if="userId != item.memberUserId">
					<img :src="item.avatar?item.avatar:'/static/mr_tx.png'" alt="" @click="toUser(item)">
					<div class="b">
						<p class="name" v-if="param.sendGroupUserId == 1">{{item.sendGroupUserName}}群-{{item.createDate}}</p>
						<div class="text">
							<p>{{item.message}}</p>
							<div class="img_list" v-if="item.pictureList.length">
								<img @click="previewImg(item.pictureList,child)" v-for="(child,i) in item.pictureList" :src="child" alt="">
							</div>
						</div>
					</div>
				</div>

				<div class="right" v-else>
					<div class="b">
						<p class="name" v-if="param.sendGroupUserId == 1">{{item.sendGroupUserName}}群-{{item.createDate}}</p>
						<div class="text">
							<p>{{item.message}}</p>
							<div class="img_list" v-if="item.pictureList.length">
								<img @click="previewImg(item.pictureList,child)" v-for="(child,i) in item.pictureList" :src="child" alt="">
							</div>
						</div>
					</div>
					<img :src="item.avatar?item.avatar:'/static/mr_tx.png'" alt="" @click="toUser(item)">
				</div>
			</div>
			<div class="no_data" v-if="!list.length">
				<img src="/static/no-data.png" alt="">
				<p>暂无接单消息</p>
			</div>


			<!-- <div class="gg_box" v-if="ggShow" :style="{top:navBarHeight+60+'px'}">
				<div class="box">
					<p class="img"></p>
					<div>
						<p class="name">重庆群</p>
						<p class="text">内容内容内容内容内容内内容内容内容内</p>
						<p style="height: 20rpx;"></p>
					</div>
					<p class="close" @click="ggShow = false">广告 <u-icon name="close" color="#ffffff" size="14"></u-icon></p>
				</div>
			</div> -->
		</scroll-view>
		
		<div class="input_box" :style="{paddingBottom:isIphoneXnum+'px'}">
			<div class="box">
				<div class="label">
					<p @click="toCompany"><img src="/static/index-icon0.png" alt="">公司转让</p>
					<p @click="toLocal"><img src="/static/index-icon1.png" alt="">本地同行</p>
					<p @click="toGuarantee"><img src="/static/index-icon2.png" alt="">担保交易</p>
					<p @click="toExposure"><img src="/static/index-icon3.png" alt="">曝光台</p>
					<p @click="clickNotice"><img src="/static/index-icon4.png" alt="">群公告</p>
				</div> 
				<div class="sr_input">
					<div @click="clickReleasePop">
						<img src="/static/index-icon5.png" alt="">
						<p>请输入你的接单信息</p>
					</div>
					<div @click="clickMessagePop">
						<img src="/static/index-icon6.png" alt="">
						<p>私信</p>
					</div>
				</div>
			</div>
		</div>

		<!-- 发布 -->
		<u-popup @close="closeRelease" closeOnClickOverlay safeAreaInsetBottom :round="12" :show="releaseShow" mode="bottom">
			<release-pop @close="closeRelease" :isRefresh="isRefresh" :notUsedCount="notUsedCount"></release-pop>
		</u-popup>

		<!-- 私信 -->
		<u-popup @close="closeMessage" safeAreaInsetBottom :round="12" :show="messageShow" mode="bottom">
			<message-pop @close="closeMessage" :isRefresh2="isRefresh2"></message-pop>
		</u-popup>

		<!-- 公告 -->
		<u-popup safeAreaInsetBottom :round="12" :show="noticeShow" mode="bottom">
			<notice-pop @close="closeNotice" :msg="noticeMsg"></notice-pop>
		</u-popup>

		<!-- 选择接单群 -->
        <city-picker :isRefresh1="isRefresh1" :show="isCityShow" @closeCity="closeCity" @confirm="changeCity"></city-picker>
	
		<!-- 提示未激活 -->
		<u-popup :round="12" :show="tipsShow" mode="center">
			<tips-pop @close="closeTips"></tips-pop>
		</u-popup>

		<!-- 激活弹窗 activeShow-->
		<u-popup safeAreaInsetBottom :round="12" :show="activeShow" mode="bottom">
			<active-pop @close="closeActive"></active-pop>
		</u-popup>


		<!-- 默认弹窗 -->
		<u-popup :round="12" :show="mrShow" mode="center">
			<mr-pop @close="closeMr"></mr-pop>
		</u-popup>

		<!-- 举报弹窗 -->
		<u-popup :round="12" :show="jbShow" mode="center">
			<jb-pop @close="closeJp" :msg="jbMsg" :isRefresh3="isRefresh3"></jb-pop>
		</u-popup>


		<!-- 微信公众号二维码 -->
		<u-popup :round="12" :show="gzhShow" mode="center">
			<div class="ewm_box">
				<p class="close" @click="gzhShow = false"><u-icon name="close" color="#999999" size="20"></u-icon></p>
				<img :show-menu-by-longpress="true" mode="widthFix" src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQFw8TwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyczYxNFFGOWdmQUgxMDAwME0wN2QAAgReKY5nAwQAAAAA" alt="">
				<p>长按二维码识别关注</p>
				<p class="close1" @click="gzhShow = false">关闭</p>
			</div>
		</u-popup>
		
	</div>
</template>

<script>
	import { mapState,mapActions } from 'vuex'
	import api from '@/api';
	import { formatDateAll } from '@/utils/utils.js'
	import { getTimeUtils } from '@/utils/utils.js'
	import ReleasePop from './components/ReleasePop.vue'
	import MessagePop from './components/MessagePop.vue'
	import NoticePop from './components/NoticePop.vue'
	import TipsPop from './components/TipsPop.vue'
	import ActivePop from './components/ActivePop.vue'
	import MrPop from './components/MrPop.vue'
	import JbPop from './components/JbPop.vue'
	export default {
		components: {
			ReleasePop,
			MessagePop,
			NoticePop,
			TipsPop,
			ActivePop,
			MrPop,
			JbPop
		},
		data() {
			return {
				statusBarHeight: "", // 状态栏高度
				titleBarHeight: "", // 标题栏高度
				navBarHeight: "", // 导航栏总高度
				isIphoneXnum:0,
				loadingShow:false,
				isFx:false, // true 上 false 下
				releaseShow:false,// 发布弹窗
				messageShow:false,// 私信弹窗
				noticeShow:false,// 公告弹窗
				noticeMsg:{},
				tipsShow:false,// 提示弹窗
				mrShow:false,
				activeShow:false,// 激活弹窗
				jbShow:false,// 举报弹窗
				jbMsg:{},

				notUsedCount:0,// 可使用条数
				isCityShow:false,
                cityMsg:{},
				isRefresh:0,// 控制组件刷新
				param:{
					sendGroupUserId:1,
					pageNo:0,
					pageSize:20
				},
				groupName:'',
				list:[],
				isRefresh1:0,
				isRefresh2:0,
				isRefresh3:0,
				intoView:'',
				scrollViewHeight:'',
				isPreviewImage:false,
				shareUserId:'',
				gzhShow:false,
				isa:false,
				ggShow:true
			}
		},
		computed: {
			...mapState({
				userId: state => state.user.userId,
				token: state => state.user.token,
				status:state => state.user.status,
			})
		},
		async onLoad(options) {
			if(options.shareUserId){
				this.shareUserId = options.shareUserId
			}
			if(options.groupName){
				this.groupName = options.groupName
				this.param.sendGroupUserId = options.groupId
			}


			if(this.token){
				this.getNotice()
			}
		},
		async onShow(){
			this.activeShow = false
			this.jbShow = false
			this.messageShow = false
			this.noticeShow = false
			if(this.token){
				await api.user.follow_wx({userId:this.userId}).then(res=>{
					if(res.code == 200){
						if(!res.data){
							uni.showModal({
								title: '温馨提示',
								content: '由于您未关注公众号，无法实时接收群消息',
								confirmText: '立即关注',
								success:(res)=>{
									if (res.confirm) {
										this.gzhShow = true
										this.releaseShow = false
										this.noticeShow = false
									} 
								},
							})
						}else{
							this.gzhShow = false
						}
					}
					
				})
			}else{
				this.mrShow = true
			}
			if (uni.canIUse("getUpdateManager")) {
				console.log("进去版本检测------->");
				const updateManager = uni.getUpdateManager();
				updateManager.onCheckForUpdate(function (res) {
					if (res.hasUpdate) {
						//下载成功
						updateManager.onUpdateReady(function () {
							uni.showModal({
								title: "更新提示",
								content: "新版本已经准备好，是否重启应用？",
								success: function (res) {
									if (res.confirm) {
										updateManager.applyUpdate();
									}
								},
							});
						});
						//下载失败
						updateManager.onUpdateFailed(function () {
							uni.showModal({
							title: "已经有新版本了哟~",
							content: "新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~",
							});
						});
					} else {
						console.log("最新版本-------》");
					}
				});
			} else {
				uni.showModal({
					title: "提示",
					content:
					"当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
				});
			}
			uni.getSystemInfo({
				success: (res) => {
					console.log("手机信息res" + res.model);
					let modelmes = res.model;
					if (
						modelmes.search("iPhone 16") != -1 ||
						modelmes.search("iPhone 15") != -1 ||
						modelmes.search("iPhone 14") != -1 ||
						modelmes.search("iPhone 13") != -1 ||
						modelmes.search("iPhone 12") != -1 ||
						modelmes.search("iPhone 11") != -1 ||
						modelmes.search("iPhone X") != -1 ||
						modelmes.search("iPhone XR") != -1 ||
						modelmes.search("iPhone XS") != -1
					) {
						this.isIphoneXnum = 25;
					} else {
						this.isIphoneXnum = 0;
					}
				},
			});


			if(this.isPreviewImage){
				return
			}
			this.param.pageNo = 0
			// uni.showLoading({title: '加载中...'})
			if(this.token){
				this.mrShow = false
			}

			api.user.get_sell_user({userId:this.userId}).then(res=>{
				if(res.code == 200){
					// this.param.sendGroupUserId = res.data.groupId
					// this.groupName = res.data.groupName
					this.getList(true)
					if(res.data){
						this.updateUserStatus(res.data.status)
					}
				}else{
					uni.hideLoading()
					
					this.getList(true)
				}
			})
			this.getFbNum()
			
		},
		methods: {
			...mapActions( ['updateUserStatus']),


			// 获取可发送条数
            getFbNum(){
                api.user.package_get({userId:this.userId}).then(res=>{
					if(res.code == 200){
						if(!res.data){
							this.notUsedCount = 0
						}else{
							this.notUsedCount = res.data.notUsedCount
						}
					}
                })
            },

			clickNotice(){
				console.log(this.noticeMsg)
				if(this.noticeMsg && this.noticeMsg.title){
					this.noticeShow = true
				}
			},

			// 获取公告
			getNotice(){
				let data = {
					status:0,
					applicationId:1
				}
				api.user.notice_list(data).then(res=>{
					if(res.code == 200){
						if(res.data.length){
							this.noticeMsg = res.data[0]
							console.log(this.noticeMsg)
							this.noticeShow = true
						}
					}
				})
			},

			getScrollHeight(){
				uni.getSystemInfo({
					success: res => {
						const query = uni.createSelectorQuery().in(this);
						query.selectViewport().scrollOffset(); // 获取滚动偏移量
						query.select('.head_box').boundingClientRect(); // 获取顶部内容的高度
						query.exec((res) => {
							console.log('=======')
							console.log(res)
							if(this.isIphoneXnum){
								this.scrollViewHeight = res[1].height+25;
							}else{
								this.scrollViewHeight = res[1].height;
							}
						});
					}
				});
			},

			previewImg(imgList,imgurl) {
				uni.previewImage({
					current: imgurl, // 当前显示图片的http链接
					urls: imgList, // 需要预览的图片http链接列表
					success: () => {
						console.log('预览成功');
						this.isPreviewImage = true
					},
				});
			},

			// 跳转个人
			toUser(item){
				console.log(item)
				if(!this.token){
					this.isPreviewImage = false
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				if(!this.status){
					this.tipsShow = true
					return
				}
				if(item.memberUserId == this.userId){
					this.$toast('不能给自己发私信！')
					return
				}
				uni.showLoading({title: '加载中...'})
				this.isPreviewImage = false
				let setData = JSON.stringify({
					memberUserId:item.memberUserId,
					id:item.id,
					bAvatar:item.avatar,
					memberUserName:item.memberUserName
				})
				api.user.jb_exposure({userId:item.memberUserId}).then(res=>{
					if(res.code == 200){
						if(res.data.exposure){
							this.isRefresh3 = 1
							res.data.createTime = formatDateAll(res.data.createTime)
							this.jbShow = true
							this.jbMsg = JSON.stringify({
								memberUserId:item.memberUserId,
								id:item.id,
								bAvatar:item.avatar,
								memberUserName:item.memberUserName,
								createTime:res.data.createTime,
								exposure:res.data.exposure,
								groupName:res.data.groupName
							})
						}else{
							uni.navigateTo({
								url: `/pages/chat/index?setData=${setData}`
							});
						}
						uni.hideLoading()
					}
				})
			},

			changeCityPop(){
				this.isCityShow = true
                this.isRefresh1 = 1
			},

			getList(state){
				this.intoView = ''
				// this.$showLoading('加载中...')
				api.user.news_list(this.param).then(res=>{
					if(res.code == 200){
						this.getScrollHeight()
						// setTimeout(() => {
							uni.hideLoading();
							this.loadingShow = false
							if(state){
								this.list = []
							}
							if(this.param.pageNo && !res.data.list.length){
								// this.$toast('没有更多信息~')
								return
							}
							res.data.list.map(item=>{
								item.createDate = getTimeUtils(item.createDate)
							})
							this.list.unshift(...res.data.list)

							this.intoView = `item${this.list.length-1}`
						// },500);

					}else{
						uni.hideLoading()
					}
				})
			},

			// 确定接单群
            changeCity(e){
                console.log(e)
				this.param.pageNo = 0
				// uni.showLoading({title: '加载中...'})
				this.groupName = e.name
                this.cityMsg = e
                this.isCityShow = false
				this.param.sendGroupUserId = e.id
				this.getList(true)
            },

            // 关闭刷单群弹窗
            closeCity(){
                this.isCityShow = false
				this.isRefresh1 = 0
            },

			// 跳转担保交易
			toGuarantee(){
				this.isPreviewImage = false
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				if(!this.status){
					this.tipsShow = true
					return
				}
				uni.navigateTo({
					url: '/pages/guarantee/index'
				});
			},

			// 跳转曝光台
			toExposure(){
				this.isPreviewImage = false
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				if(!this.status){
					this.tipsShow = true
					return
				}
				uni.navigateTo({
					url: '/pages/exposure/index'
				});
			},

			// 跳转公司库
			toCompany(){
				// this.$toast('该功能即将上线！')
				// return
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				uni.navigateTo({
					url: '/pages/company/index'
				});
			},

			// 跳转本地宝
			toLocal(){
				this.isPreviewImage = false
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				if(!this.status){
					this.tipsShow = true
					return
				}
				uni.navigateTo({
					url: '/pages/local/index'
				});
			},

			// 发布信息弹窗
			clickReleasePop(){
				if(!this.token){
					this.isPreviewImage = false
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				if(!this.status){
					this.tipsShow = true
					return
				}
				if(!this.notUsedCount){// 没得发言条数
					this.activeShow = true
					return
				}
				this.isRefresh = 1
				this.releaseShow = true
			},

			// 关闭发布弹窗
			closeRelease(e){
				console.log(e)
				if(e){
					this.param.pageNo = 0
					this.getFbNum()
					this.getList(true)
				}
				this.releaseShow = false
				this.isRefresh = 0
			},

			// 私信
			clickMessagePop(){
				if(!this.token){
					this.isPreviewImage = false
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				if(!this.status){
					this.tipsShow = true
					return
				}
				this.isRefresh2 = 1
				this.messageShow = true
			},
			
			// 关闭公告
			closeTips(e){
				console.log(e)
				this.tipsShow = false
				if(e){
					this.activeShow = true
				}
			},

			// 关闭默认弹窗
			closeMr(e){
				if(e){
					this.isPreviewImage = false
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				this.mrShow = false
			},

			// 激活弹窗关闭
			closeActive(){
				this.activeShow = false
			},

			// 关闭私信弹窗
			closeMessage(e){
				console.log('aaa')
				this.messageShow = false
				this.isRefresh2 = 0
			},

			// 关闭举报弹窗
			closeJp(){
				this.jbShow = false
				this.isRefresh3 = 0
			},

			handleScrollToUpper() {
				if(this.isFx){
					console.log('滚动到顶部了');
					this.loadingShow = true
					this.isFx = false
					
					this.param.pageNo++
					this.getList(false)
				}
			},
			onScroll(event) {
				const deltaY = event.detail.deltaY;
				if (deltaY > 0) {
					this.isFx = true
				}else{
					this.isFx = false
				}
			},

			// 关闭公告
			closeNotice(){
				this.noticeShow = false
			},

			// 跳转群成员
			toGroup(){
				this.isPreviewImage = false
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				if(!this.status){
					this.tipsShow = true
					return
				}
				uni.navigateTo({
					url: `/pages/group/index?groupId=${this.param.sendGroupUserId}`
				});
			}

		},
		beforeMount() {
			const self = this;
			wx.getSystemInfo({
				success(system) {
					self.statusBarHeight = system.statusBarHeight;
					let platformReg = /ios/i;
					if (platformReg.test(system.platform)) {
						self.titleBarHeight = 44;
					} else {
						self.titleBarHeight = 40;
					}
					self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
				},
			});
		},
		onShareAppMessage() {
			return {
				title: '免费用万人接单群',
				path: `/pages/index/index?shareUserId=${this.userId}`
			}
		},
	}
</script>

<style lang="scss" scoped>
	$tx_height:92rpx;
	$input_an_height:80rpx;
	$colors: (
		(#E080F1,#8532F1,#8734F3),
		(#58ABF9,#165DFF,#3B74F5),
		(#94E57E,#00AC1D,#10BC00),
		(#F5D03B,#FFAA16,#F5B13B),
		(#FF5A0E,#FF1616,#FF3838),
	);
	@mixin content-flex($pitch) {
		display: flex;
		align-items: center;
		justify-content:  $pitch;
	}
	.content{
		min-height: 100vh;
		.head_box{
			// padding-bottom:50rpx;
			position: relative;
			.bj{
				width: 100%;
				height: 100vh;
				position: absolute;
				top:0;
				left: 0;
			}
			.box{
				@include content-flex(space-between);
				height: 110rpx;
				padding:0 30rpx;
				position: relative;
				z-index: 10;
				div{
					@include content-flex(center);
					width: 88%;
					height: 72rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					font-size: 32rpx;
					color: #4E5969;
					font-weight: bold;
					box-shadow: 0px 8rpx 20rpx 0px rgba(59, 116, 245, 0.1);
					p{
						margin-right:12rpx;
					}
				}
				img{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
		.list_box{
			width: 100%;
			background: #fff;
			// margin-top:-46rpx;
			border-radius: 20rpx 20rpx 0px 0px;
			position: relative;
			z-index: 10;
			// height: calc(100vh - 105px - 115px);
			.loading_more{
				margin:30rpx 0;
			}
		}
		.list{
			padding:0 26rpx;
			&:first-child{
				padding-top:30rpx;
			}
			.time{
				text-align: center;
				padding-bottom:30rpx;
				font-size:24rpx;
				color:#999999;
			}
			.yq{
				font-size:26rpx;
				color:#999999;
				text-align: center;
				padding-bottom:30rpx;
				span{
					color:#3B74F5;
				}
			}
			.left{
				width: 100%;
				display: flex;
				margin-bottom:40rpx;
				img{
					width: $tx_height;
					height: $tx_height;
					border-radius: 8rpx;
				}
				.b{
					max-width: 86%;
					.name{
						color:#666666;
						font-size:26rpx;
						margin:0 0 6rpx 18rpx;
					}
					.text{
						background: #F1F1F1;
						margin:0 0 0 18rpx;
						font-size:30rpx;
						color:#333;
						padding:24rpx;
						border-radius: 0 20rpx 20rpx 20rpx;
						word-wrap: break-word;
						overflow-wrap: break-word;
						.img_list{
							max-width: 100% !important;
							img{
								margin-top:20rpx;
								width: 150rpx;
								height: 150rpx;
								margin-right:20rpx;
								border-radius: 8rpx;
								&:last-child{
									margin-right: 0;
								}
							}
						}
					}
				}
			}
			.right{
				@extend .left;
    			justify-content: flex-end;
				.name{
					margin:0 18rpx 6rpx 0 !important;
					text-align: right;
				}
				.text{
					background: #23AC39 !important;
					color:#fff !important;
					margin:0 18rpx 0 0 !important;
					border-radius: 20rpx 0rpx 20rpx 20rpx !important;
				}
			}
		}
		.no_data{
			text-align: center;
			margin-top:100rpx;
			img{
				width: 320rpx;
				height: 320rpx;
			}
			p{
				font-size: 24rpx;
				color: #999999;
				margin-top:-40rpx;
			}
		}
		.input_box{
			width: 100%;
			height: 210rpx;
			display: flex;
			align-items: center;
			background: #fff;
			position: absolute;
			bottom:0;
			box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.3);
			z-index: 10;
			.box{
				width: 94%;
				padding:0 24rpx;
				.label{
					margin-bottom:20rpx;
					display: flex;
					justify-content: space-between;
					p{
						@include content-flex(unset);
						padding:12rpx 6rpx;
						background: #fff;
						border-radius: 10rpx;
						color:#fff;
						font-size:24rpx;
						@for $i from 1 through length($colors){
							&:nth-child(#{$i}){
								$start-color: nth(nth($colors, $i), 1);
								$end-color: nth(nth($colors, $i), 2);
								$border-color: nth(nth($colors, $i), 3);
								background: linear-gradient(270deg, $start-color 0%, $end-color 100%);
								border: 1px solid $border-color;
							}
						}
						img{
							width: 30rpx;
							height: 30rpx;
							margin-right:6rpx;
						}
						&:last-child{
							margin-right:0;
						}
					}
				}
				.sr_input{
					@include content-flex(space-between);
					div{
						@include content-flex(unset);
						background: #F1F1F1;
						border-radius: 10rpx;
						height: $input_an_height;
						padding:0 28rpx;
						color:#333;
						font-size:28rpx;
						&:first-child{
							width: 62%;
						}
						&:last-child{
							width: 18%;
						}
						img{
							width: 40rpx;
							height: 40rpx;
							margin-right:20rpx;
						}
					}
				}
			}
		}
		.ewm_box{
			width: 650rpx;
			height: auto;
			background: #fff;
			border-radius: 12rpx;
			text-align: center;
			padding-bottom:30rpx;
			.close{
				display: flex;
				justify-content: flex-end;
				padding-top:24rpx;
				margin-right:30rpx;
			}
			img{
				width: 90%;
				height: 300rpx;
			}
			p{
				font-size:32rpx;
				padding-bottom:30rpx;
			}
			
		}
		.close1{
			text-align: center;
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			border:1px solid #00AC1D;
			color:#00AC1D;
			margin:0 auto;
			font-size:30rpx;
			border-radius: 50rpx;
			padding:0 !important;
		}
		.gg_box{
			position: fixed;
			top:30rpx;
			left: 0;
			// background: linear-gradient(180deg, #D3F6D9 0%, #FFFFFF 100%);
			width: 100%;
			.box{
				padding:30rpx 22rpx;
				border-radius: 12rpx;
				background: #EDEDED;
				border-radius: 20rpx;
				margin:0 30rpx;
				display: flex;
				box-shadow: 0 12rpx 15rpx #d2d2d2;
				.img{
					width: 88rpx;
					height: 88rpx;
					background: #aaa;
					border-radius: 10rpx;
				}
				div{
					flex: 1;
					margin-left:20rpx;
					display: flex;
					flex-direction:column;
					justify-content: space-between;
					.name{
						color: #3D3D3D;
						font-size: 28rpx;
					}
					.text{
						color: #999999;
						font-size:28rpx;
					}
				}
				.close{
					width: 90rpx;
					position: absolute;
					right:30rpx;
					bottom:0;
					display: flex;
					justify-content: center;
					padding:6rpx 0;
					font-size:24rpx;
					color:#fff;
					background: #FF463F;
					border-bottom-right-radius: 20rpx;
				}
			}
		}
	}
</style>
